import { reactive, toRefs } from 'vue'

export interface PagesState {
  pageNum: number
  pageSize: number
  total: number
  layout: string
  background: boolean
  small: boolean
  pageSizes: number[]
}

export const usePagin = (fn: Function) => {
  const pagesState: PagesState = reactive({
    pageNum: 1, // 当前页面
    pageSize: 15, // 每页查询数
    total: 0, // 数据总数
    layout: 'total, sizes, prev, pager, next, jumper',
    pageSizes: [15, 30, 50, 100],
    background: true,
    small: true,
  })

  const handleSizeChange = (size: number) => {
    pagesState.pageNum = 1
    pagesState.pageSize = size
    fn()
  }
  const handleCurrentChange = (count: number) => {
    pagesState.pageNum = count
    fn()
  }
  return {
    ...toRefs(pagesState),
    pagesState,
    handleSizeChange,
    handleCurrentChange,
  }
}
